<template>
  <div>
    <!-- system admin  登陆进来 -->
    <div v-if="loginRole == 'systemAdmin'">
      <header>
        <div class="dashboard-data">
          <div>
           
            <span>Account</span>
          </div>
          <div class="second-number">84</div>
        </div>
        <div class="dashboard-data">
          <div>
           
            <span>Maintenance Teams</span>
          </div>
          <div class="second-number">8</div>
        </div>
        <div class="dashboard-data">
          <div>
           
            <span>Unassigned Account</span>
          </div>
          <div class="second-number">4</div>
        </div>

        <div class="dashboard-data">
          <div>
           
            <span>Locked Addounts</span>
          </div>
          <div class="second-number">5</div>
        </div>
      </header>

      <article class="article-box">
        <h1>System Events</h1>
        <div>
          ZOOM:
          <span
            v-for="(item, index) in choose"
            :key="index"
            class="zoomNoChoose"
            @click="zoomClick(index)"
            :class="
              zoomChooseClick == index ? 'zoomChooseStyle' : 'zoomNoChoose'
            "
          >
            {{ item }}
          </span>
        </div>

        <div
          id="echart1"
          style="width: 85vw; height: 220px"
          class="echartA"
        ></div>
        <div
          id="echart2"
          style="width: 100vw; height: 300px"
          class="echartB"
        ></div>
      </article>
    </div>

    <!-- maintenance manager 登陆进来的时候 -->
    <div v-if="loginRole == 'maintenance'" class="maintenance">
      <header class="maintenance-dashboard">
        <div class="maintenance-dashboard-options">
          <h1>Current Backlog WOs</h1>
          <div class="second-line">
            <div>
              <span class="nums">1</span>
              <span class="no-nums">CM WO</span>
            </div>
            <div>
              <span class="nums">8</span>
              <span class="no-nums">PM WO</span>
            </div>
          </div>
        </div>
        <div class="maintenance-dashboard-options">
          <h1>Current Late WOs</h1>
          <div class="second-line">
            <div>
              <span class="nums">1</span>
              <span class="no-nums">CM WO</span>
            </div>
            <div>
              <span class="nums">8</span>
              <span class="no-nums">PM WO</span>
            </div>
          </div>
        </div>
        <div class="maintenance-dashboard-options">
          <h1>Current Unassigned WOs</h1>
          <div class="second-line">
            <div>
              <span class="nums">1</span>
              <span class="no-nums">CM WO</span>
            </div>
            <div>
              <span class="nums">8</span>
              <span class="no-nums">PM WO</span>
            </div>
          </div>
        </div>
        <div class="maintenance-dashboard-options">
          <h1>Current WOs to Review</h1>
          <div class="second-line">
            <div>
              <span class="nums">1</span>
              <span class="no-nums">CM WO</span>
            </div>
            <div>
              <span class="nums">8</span>
              <span class="no-nums">PM WO</span>
            </div>
          </div>
        </div>
      </header>

      <article>
        <div>1</div>
        <div>2</div>
      </article>
    </div>
  </div>
</template>

<script>
import { reactive, toRefs, onMounted } from "vue";
import * as echarts from "echarts";
export default {
  setup() {
    const state = reactive({
      count: 0,
      choose: ["15m", "30m", "1h", "3h", "6h", "12h", "All"], //zoom选项
      zoomChooseClick: "", //Zoom被点击的角标

      loginRole: "systemAdmin", //   systemAdmin  maintenance
    });

    // zoom被点击的时候 赋值
    function zoomClick(index) {
      console.log(index);
      state.zoomChooseClick = index;
    }

    onMounted(() => {
      // 获取实例
      if (state.loginRole == "systemAdmin") {
        var myChart1 = echarts.init(document.getElementById("echart1"));

        var myChart2 = echarts.init(document.getElementById("echart2"));
        // 实例化配置
        myChart1.setOption({
          tooltip: {
            trigger: "axis",
            axisPointer: {
              type: "shadow",
            },
          },
          legend: {},
          grid: {
            left: "3%",
            right: "4%",
            bottom: "3%",
            containLabel: true,
          },
          xAxis: [
            {
              type: "category",
              data: [
                0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17,
                18, 19, 20, 21, 22, 23,
              ],
            },
          ],
          yAxis: [
            {
              type: "value",
            },
          ],
          series: [
            {
              name: "Email",
              type: "bar",
              stack: "Ad",
              emphasis: {
                focus: "series",
              },
              data: [
                120, 132, 101, 134, 90, 230, 210, 120, 132, 101, 134, 90, 230,
                210, 120, 132, 101, 134, 90, 230, 210, 22, 23, 24,
              ],
            },
            {
              name: "Union Ads",
              type: "bar",
              stack: "Ad",
              emphasis: {
                focus: "series",
              },
              data: [
                220, 182, 191, 234, 290, 330, 310, 220, 182, 191, 234, 290, 330,
                310, 220, 182, 191, 234, 290, 330, 310, 22,

                28, 27,
              ],
            },
          ],
        });

        myChart2.setOption({
          xAxis: {
            type: "category",
            data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
          },
          yAxis: {
            type: "value",
          },
          series: [
            {
              data: [150, 230, 224, 218, 135, 147, 260],
              type: "line",
            },
          ],
          title: {
            show: true, // 是否显示标题组件,（true/false）
            text: "Hour of the Day", // 主标题文本，支持使用\n换行
            left: "40%",
          },
        });
      }
    });

    return {
      ...toRefs(state),
      zoomClick,
    };
  },
};
</script>

<style lang="scss" scoped>
//admin 进来的样式
header {
  display: flex;
  justify-content: space-between;

  .dashboard-data {
    width: 24%;
    height: 180px;
    background: #fff;
    box-sizing: border-box;
    padding: 32px;
    .second-number {
      text-align: center;
      font-size: 48px;
      font-weight: 600;
      margin-top: 48px;
    }
  }
}

article {
  height: 65vh;
   background: #fff;
  margin-top: 16px;
  box-sizing: border-box;
  padding: 16px;
  h1 {
    margin: 10px;
  }
}

.zoomNoChoose {
  display: inline-block;
  width: 60px;
  height: 30px;
  border: 1px solid gray;
  border-radius: 5px;
  text-align: center;
  line-height: 30px;
  margin: 0 6px;
  cursor: pointer;
}
.zoomChooseStyle {
  background: #3bcbbc;
  color: white;
  display: inline-block;
  width: 60px;
  height: 30px;
  border: 1px solid gray;
  border-radius: 5px;
  text-align: center;
  line-height: 30px;
  margin: 0 6px;
  cursor: pointer;
  border: none;
}
.echartA {
 margin-left: 100px;
}

//maintenance进来

.maintenance {
  .maintenance-dashboard {
    display: flex;
    justify-content: space-between;

    .maintenance-dashboard-options {
      width: 24%;
      height: 180px;
      background: #fff;
      box-sizing: border-box;
      padding: 24px;
      .second-line {
        display: flex;
        div {
          margin: 10px 16px;
          .nums {
            font-size: 48px;
            margin-right: 24px;
          }
          .no-nums {
            font-size: 24px;
          }
        }
      }
    }
  }

  article{
    height: 66vh;
   
    display: flex;
    justify-content: space-between;
    padding: 0px;
    div{
      width: 49.2%;
      border: 1px  solid red;
    }
  }
}
</style>
